<template>
  <div class="forget-wrap">
      <img class="avatar" src="../../images/avatar.png" alt="">
      <div class="input-item box box-align-center">
          <input v-model="mobile" type="number" maxlength="20" placeholder="请输入手机号">
      </div>
      <div class="input-item code box box-align-center">
          <input v-model="code" type="text" maxlength="20" placeholder="请输入验证码">
          <div @click="getCode" class="send-code">{{codeMsg}}</div>
      </div>
      <div class="input-item box box-align-center">
          <input v-model="newPwd" type="password" maxlength="20" placeholder="请输入6-18位新密码">
      </div>
     <div class="input-item box box-align-center">
          <input v-model="confirmPwd" type="password" maxlength="20" placeholder="请再次输入6-18位新密码">
      </div>
      <div @click="login" class="btn">确定 </div>
  </div>
</template>

<script>
let CONSTANT = require('../../../wechat/static/constant/constant.js'),
    common = require("../../../wechat/static/common/common.js"),
    wsService = require("../../../wechat/static/common/wechat-jsdk.js");
export default {
  components: {
      
  },
  data () {
    return {
        mobile:'',
        newPwd:'',
        confirmPwd:'',
        code:'',
        codeMsg:'获取',
    }
  },
  mounted(){
   
  },
  methods:{
    linkTo(link){
        this.$router.push(link)
      },
    getCode(){
        if (!this.mobile) {
            this.$vux.toast.show({
                text: '手机号不能为空',
                    type:'cancel'
            })
            return;
        }
        if (!(/^1[34578]\d{9}$/.test(this.mobile))) {
            this.$vux.toast.show({
                text: '手机号格式不对',
                    type:'cancel'
            })
            return;
        }
            if (this.codeMsg != '获取') {
                return;
            }
            let time = 60;
            this.getCodeNum()
            setInterval(() => {
            if (time <= 1) {
                this.codeMsg = '获取'
                return;
            }
            this.codeMsg =time-- + 's'
            }, 1000)
 
    },
    getCodeNum(){
        let  url = CONSTANT.URL.USER.FINDCODE,
            param = {mobile:this.mobile,bizType:'find_pwd'}
        common.requestAjax(url,{},param,(res)=>{
            if(res.status == 200){
                this.$vux.toast.show({
                    text: res.msg
                })
            }else{
              this.$vux.toast.show({
                    text:res.msg,
                    type:'cancel'
                })
            }
        })
    },
      login(){
        if (!this.mobile) {
            this.$vux.toast.show({
                text: '手机号不能为空',
                type:'cancel'
            })
            return;
        }
        if (!(/^1[34578]\d{9}$/.test(this.mobile))) {
            this.$vux.toast.show({
                text: '手机号格式不对',
                    type:'cancel'
            })
            return;
        }
        if (!this.code) {
            this.$vux.toast.show({
                text: '验证码不能为空',
                type:'cancel'
            })
            return;
        }
        if (!this.newPwd) {
            this.$vux.toast.show({
                text: '密码不能为空',
                type:'cancel'
            })
            return;
        }
        if (!this.confirmPwd) {
            this.$vux.toast.show({
                text: '确认新密码不能为空',
                type:'cancel'
            })
            return;
        }
        if (this.confirmPwd!=this.newPwd) {
            this.$vux.toast.show({
                text: '确认密码不一致',
                type:'cancel'
            })
            return;
        }
        let  url = CONSTANT.URL.USER.FINPWD,
            param = {
                mobile:this.mobile,
                code:this.code,
                newPwd:this.newPwd,
                confirmPwd:this.confirmPwd
            }
        common.requestAjax(url,param,{},(res)=>{
            if(res.status == 200){
                this.$vux.toast.show({
                    text: res.msg
                })
                this.$router.replace('/login');
            }else{
              this.$vux.toast.show({
                    text:res.msg,
                    type:'cancel'
                })
            }
        })         
      }
  }
}
</script>

<style lang="scss">
    .forget-wrap{
        width: 100%;
        height: 11.4rem;
        background-color: #000120;
        padding-top: .6rem;
        .avatar{
            width: 2.26rem;
            height: 2.26rem;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            margin: 0 auto .88rem;
            display: block;
        }
        .input-item{
            width: 5.7rem;
            height: .88rem;
            margin: 0 auto .32rem;
            background-color: #171834;
            border-radius: .44rem;
            -webkit-border-radius: .44rem;
            &{
                input{
                    width: 4rem;
                    margin-left: .5rem;
                }
                .send-code{
                    font-size: .28rem;
                    color: #198AE7;
                    text-align: center;
                    width: 1rem;
                    height: .88rem;
                    line-height: .88rem;
                }
            }
            input{
                height: .88rem;
                background-color: #171834;
                 border: 0;
                 font-size: .32rem;
                 color: #999;
                &:focus{
                    outline: 0;
                   
                }
            }
        }
        .btn{
            width: 5.7rem;
            height: .88rem;
            line-height: .88rem;
            text-align: center;
            margin: .84rem auto 0;
            background-color: #198AE7;
            color: #fff;
            font-size: .32rem;
            border-radius: .44rem;
            -webkit-border-radius: .44rem;
        }
        .forget{
            color: #D2D1D1;
            font-size: .28rem;
            text-align: center;
            margin-top: .29rem;
        }
    }
</style>
